<template>
  <div class="login-container">
    <div class="login-box">
      <h2>欢迎登录</h2>
      
      <!-- 登录方式切换 -->
      <div class="login-tabs">
        <div 
          :class="['tab-item', activeTab === 'account' ? 'active' : '']"
          @click="activeTab = 'account'"
        >
          账号密码登录
        </div>
        <div 
          :class="['tab-item', activeTab === 'phone' ? 'active' : '']"
          @click="activeTab = 'phone'"
        >
          手机号登录
        </div>
        <div 
          :class="['tab-item', activeTab === 'wechat' ? 'active' : '']"
          @click="switchToWechat"
        >
          微信登录
        </div>
      </div>

      <!-- 账号密码登录 -->
      <form v-if="activeTab === 'account'" @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <input 
            type="text" 
            v-model="account.username" 
            placeholder="用户名/邮箱"
            required
          >
        </div>
        <div class="form-group">
          <input 
            type="password" 
            v-model="account.password" 
            placeholder="密码"
            required
          >
        </div>
        <div class="form-options">
          <label>
            <input type="checkbox" v-model="account.rememberMe"> 记住我
          </label>
          <a href="#" class="forgot-password">忘记密码?</a>
        </div>
        <button type="submit" class="login-btn">登录</button>
      </form>

      <!-- 手机号登录 -->
      <form v-if="activeTab === 'phone'" @submit.prevent="handlePhoneLogin" class="login-form">
        <div class="form-group phone-input">
          <select v-model="phone.countryCode">
            <option value="+86">+86</option>
            <option value="+852">+852</option>
            <option value="+853">+853</option>
          </select>
          <input 
            type="tel" 
            v-model="phone.number" 
            placeholder="请输入手机号"
            required
          >
        </div>
        <div class="form-group verification-code">
          <input 
            type="text" 
            v-model="phone.code" 
            placeholder="验证码"
            required
          >
          <button 
            type="button" 
            class="send-code-btn"
            :disabled="phone.countdown > 0"
            @click="sendVerificationCode"
          >
            {{ phone.countdown > 0 ? `${phone.countdown}s后重新发送` : '发送验证码' }}
          </button>
        </div>
        <button type="submit" class="login-btn">登录</button>
      </form>

      <!-- 微信登录 -->
      <div v-if="activeTab === 'wechat'" class="wechat-login">
        <div class="qr-code" :class="{ 'qr-scanned': wechat.isScanned }">
          <template v-if="wechat.isExpired">
            <div class="qr-expired">
              <span>二维码已过期</span>
              <button class="refresh-btn" @click="refreshQrCode">刷新</button>
            </div>
          </template>
          <template v-else>
            <QRCodeVue3
              v-if="wechat.qrString"
              :value="wechat.qrString"
              :size="200"
              level="H"
              :background="'#fff'"
              :foreground="'#333'"
            />
            <div v-else class="qr-loading">
              <div class="loading-spinner"></div>
              <span>加载中...</span>
            </div>
          </template>
          <div v-if="wechat.isScanned" class="qr-scanned-mask">
            <div class="scanned-icon">✓</div>
            <p>扫描成功</p>
            <p class="scanned-tip">请在手机上确认登录</p>
          </div>
        </div>
        <p class="wechat-tip" v-if="!wechat.isScanned">
          请使用微信扫描二维码登录
        </p>
      </div>

      <!-- 其他登录方式 -->
      <div class="other-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        <div class="social-buttons">
          <button type="button" class="social-btn qq">QQ</button>
          <button type="button" class="social-btn weibo">微博</button>
          <button type="button" class="social-btn github">GitHub</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { QRCodeVue3 } from 'qrcode-vue3'

export default {
  name: 'LoginForm',
  components: {
    QRCodeVue3
  },
  data() {
    return {
      activeTab: 'account',
      account: {
        username: '',
        password: '',
        rememberMe: false
      },
      phone: {
        countryCode: '+86',
        number: '',
        code: '',
        countdown: 0
      },
      wechat: {
        qrString: '',
        isScanned: false,
        isExpired: false,
        checkTimer: null,
        expiryTimer: null
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('Account login attempt:', this.account);
    },
    handlePhoneLogin() {
      console.log('Phone login attempt:', this.phone);
    },
    sendVerificationCode() {
      if (this.phone.countdown > 0) return;
      
      console.log('Sending verification code to:', this.phone.countryCode + this.phone.number);
      this.phone.countdown = 60;
      
      const timer = setInterval(() => {
        this.phone.countdown--;
        if (this.phone.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    switchToWechat() {
      this.activeTab = 'wechat';
      this.generateQrCode();
    },
    generateQrCode() {
      // 清除之前的状态
      this.wechat.isScanned = false;
      this.wechat.isExpired = false;
      clearInterval(this.wechat.checkTimer);
      clearTimeout(this.wechat.expiryTimer);

      // 模拟生成二维码
      this.wechat.qrString = '';
      setTimeout(() => {
        // 生成随机的登录场景值，实际应该从后端获取
        const sceneId = Math.random().toString(36).substring(2, 15);
        this.wechat.qrString = `https://your-api.com/wechat-login?scene=${sceneId}`;
        
        // 启动二维码扫描检测
        this.startQrCodeCheck();
        
        // 设置二维码过期时间（2分钟）
        this.wechat.expiryTimer = setTimeout(() => {
          this.wechat.isExpired = true;
          clearInterval(this.wechat.checkTimer);
        }, 120000);
      }, 1000);
    },
    startQrCodeCheck() {
      // 模拟检测二维码扫描状态
      let checkCount = 0;
      this.wechat.checkTimer = setInterval(() => {
        checkCount++;
        // 模拟在5秒后被扫描
        if (checkCount === 5) {
          this.wechat.isScanned = true;
          // 模拟在扫描3秒后登录成功
          setTimeout(() => {
            console.log('WeChat login successful!');
            // 这里处理登录成功后的逻辑
          }, 3000);
        }
      }, 1000);
    },
    refreshQrCode() {
      this.generateQrCode();
    }
  },
  beforeUnmount() {
    // 清理定时器
    clearInterval(this.wechat.checkTimer);
    clearTimeout(this.wechat.expiryTimer);
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.login-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.login-tabs {
  display: flex;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 1rem 0;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
  position: relative;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

.login-form {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

input[type="text"],
input[type="password"],
input[type="tel"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s;
}

input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
  outline: none;
}

.phone-input {
  display: flex;
  gap: 10px;
}

.phone-input select {
  width: 100px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.verification-code {
  display: flex;
  gap: 10px;
}

.verification-code input {
  flex: 1;
}

.send-code-btn {
  padding: 0 15px;
  white-space: nowrap;
  background: white;
  border: 1px solid #1890ff;
  color: #1890ff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.send-code-btn:disabled {
  border-color: #d9d9d9;
  color: #d9d9d9;
  cursor: not-allowed;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  color: #666;
}

.forgot-password {
  color: #1890ff;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #40a9ff;
}

.wechat-login {
  text-align: center;
  padding: 2rem 0;
}

.qr-code {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.qr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #999;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.qr-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.refresh-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.refresh-btn:hover {
  background: #40a9ff;
}

.qr-scanned-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #52c41a;
}

.scanned-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.scanned-tip {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #eee;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.social-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}
</style> 